<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
	margin:0;
	padding:0;
}
	.box{
		width:200px;
		height:200px;
		background:pink;
		float:left;	
	}
</style>
</head>

<body>
<div class="box"></div>
<!--
	1.tap事件  轻击  轻触（响应速度快）
    2.移动端也有click事件  （在移动端为了区分是滑动还是点击，click点击延时300ms）[触碰后会等300ms来区分是点击还是滑动]
    3.影响用户体验  响应太慢了
    4.解决方案：
    4.1使用tap事件（不是移动端原生事件，通过touch相关事件衍生过来）  （zepto.js库 里面有tap事件）了解其原理
    4.2使用一个叫：fastclick.js 提高移动端click响应速度的
    4.2.1 下载 https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js
    4.2.2使用：
-->

<script src="../js/fastclick.js"></script>
<script>
	<!--当页面的dom元素加载完成-->
	document.addEventListener('DOMContentLoaded', function() {
        /*初始化方法*/
		fastClick.attach(document.body);
    }, false);
	/*正常使用click事件就可以了*/
</script>
<script>
	window.onload = function(){
		/*使用tap事件*/
		/*1.响应的速度比click快  150ms*/
		/*2.不能滑动*/
		var bindTapEvent = function(dom,callback){
			/*事件的执行顺序*/
			/*在谷歌浏览器模拟看不到300ms的效果*/
			/*在真机上面才能看得到延时效果*/
			var startTime = 0;
			var isMove = false;
			dom.addEventListener('touchstart',function(){
				/**/
				//console.log('touchstart');
				startTime = Date.now();/*时间戳Date.now();或 new Date().getTime();*/
				
			});
			dom.addEventListener('touchmove',function(){
				//console.log('touchmove');
				isMove = true;
			});
			dom.addEventListener('touchend',function(e){
				//console.log('touchend');
				console.log(Date.now()-startTime);
				if((Date.now()-startTime) < 150 && !isMove){
					callback && callback.call(this,e);	
				}
				startTime = 0;
				isMove = false;
			});
			//dom.addEventListener('click',function(){
				//console.log('click');
			//});
		};
		
		bindTapEvent(document.querySelector('.box'),function(e){
			console.log(this);
			console.log(e);
			console.log('tap事件');
		})
	}
</script>
</body>
</html>
